<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >  
    <ui:composition template="layout.xhtml">

        <ui:define name="corpo">
            <h:form id="incluir_form_entrada" acceptcharset="utf-8" prependId="false"> 
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexSelo.xhtml')}" value="Selo" update="@form" immediate="true"/> >
                    <p:commandLink  value="Cancelar Selo" update="@form" immediate="true"/>
                </div>
                <p:panel header="Cancelar Selo">
                    <p:messages showDetail="true"  id="msg" />
                    <fieldset id="fieldSet">
                        <legend>Dados do Selo</legend>
                        <h:panelGrid columns="2" border="0" id="panelAll" width="950" >
                            <h:panelGrid columns="2"  id="panelEntrada"   border="0" styleClass="textAlignRight" columnClasses="textAlignRight"> 
                                <p:row>
                                    <h:outputLabel value=" * " style="color:red;float:right"/>
                                    <h:outputLabel value="Tipo Selo: "/>

                                </p:row>
                                <p:row>
                                    <p:autoComplete id="tipoSelo" value="#{managerSelo.cancelSelo.tipoSelo}"
                                                    panelStyle="width:250px !important;" size="21" effect="blind"  
                                                    completeMethod="#{managerTipoSelo.completeTipoSelo}"  
                                                    var="p" itemLabel="#{p.nome}" itemValue="#{p}" 
                                                    converter="tipoSeloConverter" forceSelection="true" 
                                                    converterMessage="Erro, verifique o Tipo Selo" 
                                                    minQueryLength="3" dropdown="true" required="true" 
                                                    requiredMessage="O campo 'Tipo Selo' é obrigatório"> 
                                        <p:ajax event="itemSelect" listener="#{managerSelo.handleSelectTipoSelo}"/>   
                                        <p:column >  
                                            <table>
                                                <tr  style="height:30px; background-color: \##{p.corSelo.cor};">
                                                    <td style="width: 20px;"></td>
                                                </tr>
                                            </table>
                                        </p:column>
                                        <p:column>  
                                            #{p.nome}
                                        </p:column>  
                                    </p:autoComplete>
                                    <p:message for="tipoSelo"  />
                                </p:row>

                                <h:outputLabel value="Serie :"/>
                                <p:inputText id="serie" value="#{managerSelo.cancelSelo.serie}" size="25" />
                                <h:outputLabel  value="Número:"/>
                                <p:inputText id="numIni"  value="#{managerSelo.cancelSelo.numero}" 
                                             onkeypress="jQuery(this).autoNumeric({aSep: '', aPad: false});" size="25"/>

                                <h:outputLabel  value=" "/>  
                                <p:row>
                                    <br/>
                                    <p:commandButton value="Adicionar" icon="ui-icon-circle-plus" process="@this, panelAll" update="tabledetalhe, panelAll, msg"
                                                     actionListener="#{managerSelo.addListCancel()}" />                                    
                                    <p:commandButton icon="ui-icon-close" value="Limpar" type="reset" update="@form" />
                                </p:row>
                            </h:panelGrid>
                            <p:dataTable id="tabledetalhe" var="detal" 
                                         value="#{managerSelo.listCancelSelo}"
                                         rowIndexVar="rowid" emptyMessage="Nenhuma entrada de selo">
                                <f:facet name="header">
                                    <h:outputText value="Cancelar Selos"/>
                                </f:facet>
                                <p:column headerText="Tipo Selo">
                                    <h:outputText value=""/>
                                    <table class="borderZero">
                                        <tr  style="height:30px;">
                                            <td class="borderZero" style="width: 5px; background-color: \##{detal.tipoSelo.corSelo.cor};"></td>
                                            <td class="borderZero" style="width: 40px;">#{detal.tipoSelo.nome}</td>
                                        </tr>
                                    </table>
                                </p:column>
                                <p:column headerText="Série" style="width: 50px; text-align: center;">
                                    <h:outputText value="#{detal.serie}"/>
                                </p:column>
                                <p:column headerText="Número" style="width: 40px; " >
                                    <h:outputText value="#{detal.numero}" style="float: right"/>
                                </p:column>
                                <p:column style="width: 20px;" headerText="Remover">
                                    <p:commandButton style="width: 25px; height: 25px; float: right;" icon="ui-icon-trash"  actionListener="#{managerSelo.removeList(detal)}" process="@this" update="@form" immediate="true"/>
                                </p:column>
                            </p:dataTable>                           

                        </h:panelGrid>
                    </fieldset>
                    <br/>
                    <center>
                        <p:commandButton icon="ui-icon-disk" id="submit" value="Efetuar Cancelamento" actionListener="#{managerSelo.cancelar()}" update="@form" process="@this"/>
                        <p:commandButton id="limpar" icon="ui-icon-arrowreturnthick-1-w"
                                         actionListener="#{managerIndex.redirect('indexSelo.xhtml')}" 
                                         value="Cancelar"  update="@form" immediate="true"/>  
                    </center>
                </p:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</html>
